<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>松鼠咨询</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <script src="js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/index/app2.css">
    <link rel="shortcut icon" href="https://chuangkun.oss-cn-hangzhou.aliyuncs.com/icon/favicon.ico">

</head>

<body>


    <div id="box" v-cloak>
        <div id="header">
            <!-- <div id="top-line"></div> -->
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in itemMobile" :key="index">{{item}}</div>
            </div>
        </div>

    </div>


    <script src="./js/swiper.min.js"></script>
    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            name: 'app',
            data: {
                itemMobile: ["推荐", "热点", "搞笑", "养生", "情感", "科技", "美食", "娱乐", "生活"]
            },
            methods: {},
            created() {},
            mounted() {

            }

        })
        $("#header .swiper-slide").eq(0).addClass("active");
        $("#header ").on("click", ".swiper-slide", function() {
            $(this).addClass(" active").siblings(".swiper-slide").removeClass("active")
        })


        window.onload = function() {
            var navSwiper = new Swiper('#header', {
                freeMode: true,
                slidesPerView: 'auto',
                freeModeSticky: true,
            });

            var bannerSwiper = new Swiper('#banner', {
                autoplay: 5000,
                visibilityFullFit: true,
                loop: true,
                pagination: {
                    el: '#banner .pagination',
                }
            });

            var announcementSwiper = new Swiper('#announcement', {
                direction: 'vertical',
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                }
            })

            var tabsSwiper = new Swiper('#tabs-container', {
                speed: 500,
                on: {
                    slideChangeTransitionStart: function() {
                        $(".tabs .active").removeClass('active');
                        $(".tabs a").eq(this.activeIndex).addClass('active');
                    }
                }
            })
            $(".tabs a").on('click', function(e) {
                e.preventDefault()
                $(".tabs .active").removeClass('active')
                $(this).addClass('active')
                tabsSwiper.slideTo($(this).index())
            })
        }
    </script>

</body>

</html>